import styled from '@emotion/styled';
import React from 'react';
import AgentService from '@/modules/Agent';
import { Tooltip } from 'antd';

const BusinessInforMationContainer = styled.div`
	padding: 0 14px;
`;

const VaribaleName = styled.span``;

const VariableValue = styled.span`
	margin-left: 10px;
`;

const Varibale = styled.p`
	font-size: 12px;
	color: #303030;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
`;

const BusinessInforMation = () => {
	const showToolTip = (e: any) => {
		if (e.target.clientWidth >= e.target.scrollWidth) {
			e.target.style.pointerEvents = 'none'; // 阻止鼠标事件
		}
	};
	return (
		<BusinessInforMationContainer>
			{AgentService.businessVariableList.map(item => {
				return (
					<Varibale key={item.id} onMouseEnter={showToolTip}>
						<VaribaleName>{item.name}:</VaribaleName>
						<Tooltip title={item.value}>
							<VariableValue>{item.value ? item.value : '- -'}</VariableValue>
						</Tooltip>
					</Varibale>
				);
			})}
		</BusinessInforMationContainer>
	);
};

export default BusinessInforMation;
